<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">小儿推拿知识库</text>
      <text class="subtitle">专业育儿推拿指导</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input
        class="search-input"
        placeholder="请输入症状或关键词"
        v-model="searchKeyword"
        @confirm="handleSearch"
        confirm-type="search"
      />
      <button class="search-btn" @tap="handleSearch">
		  <image src="/static/search-icon.png" class="search-icon" />
	  </button>
    </view>

    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading">
		  <image src="/static/loading.gif" class="loading-icon" />
      <text>正在生成专业建议，请稍候...</text>
    </view>

    <!-- 搜索结果 -->
    <view v-else-if="searchResults.length" class="result-list">
      <view
        v-for="(item, index) in searchResults"
        :key="index"
        class="result-item"
      >
        <text class="item-title">{{ item.title }}</text>
        <text class="item-content">{{ item.content }}</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <text>暂无相关推拿方案</text>
    </view>
  </view>
</template>

<script>
// 百度文心一言的 API Key 和 Secret Key
// const BAIDU_API_KEY = 'rtbezUYabmc8EPCQ5vwkQj6B'; // 替换为你的 API Key
// const BAIDU_SECRET_KEY = 'b6NIWTVJzrU60FUgl1Slljr8fbF73MXO'; // 替换为你的 Secret Key
const BAIDU_API_KEY = 'vS6zYKFwRNL1aB0pm9cZ4Iob'; // 替换为你的 API Key
const BAIDU_SECRET_KEY = '2XQ04v2vrtHlkoUhEt1d63gqUns0pvcP'; // 替换为你的 Secret Key

export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      isLoading: false, // 加载状态
      searchResults: [], // 搜索结果
      accessToken: '', // 百度 API 的 Access Token
    };
  },
  mounted() {
    // 初始化时获取 Access Token
    this.getAccessToken();
  },
  methods: {
    // 获取百度 API 的 Access Token
    async getAccessToken() {
      try {
        const res = await uni.request({
          url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${BAIDU_API_KEY}&client_secret=${BAIDU_SECRET_KEY}`,
          method: 'POST',
        });
		console.log("token",res[1].data.access_token)
        if (res[1].data.access_token) {
          this.accessToken = res[1].data.access_token; // 保存 Access Token
        } else {
          console.error('获取 Access Token 失败:', res[1].data);
          uni.showToast({
            title: '获取 Access Token 失败，请检查配置',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('获取 Access Token 请求失败:', error);
        uni.showToast({
          title: '获取 Access Token 请求失败，请重试',
          icon: 'none',
        });
      }
    },

    // 处理搜索
    async handleSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({ title: '请输入搜索内容', icon: 'none' });
        return;
      }

      try {
        this.isLoading = true;

        // 调用百度文心一言 API
        const res = await uni.request({
          url: `https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-4.0-turbo-128k?access_token=${this.accessToken}`,
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
          },
          data: {
            messages: [
              {
                role: 'user',
                content: `你是一名专业儿科推拿专家，请回答以下问题：
                ${this.searchKeyword}
                回答要求：
                1. 分步骤说明推拿手法
                2. 包含穴位定位方法
                3. 使用数字序号排列
                4. 总字数不超过500字`,
              },
			  
            ],
			 "temperature": 0.8,
			 "top_p": 0.8,
			 "penalty_score": 1,
			 "disable_search": false,
			 "enable_citation": false,
			 "response_format": "text"
          },
          // timeout: 10000, // 超时时间 10 秒
        });

        // 处理 API 响应
        if (res[1].statusCode === 200 && res[1].data.result) {
			console.log(res[1])
          this.searchResults = [
            {
              title: this.searchKeyword,
              content: this.formatContent(res[1].data.result), // 格式化内容
            },
          ];
        } else {
          throw new Error(res[1].data.error_msg || '未生成有效响应');
        }
      } finally {
        this.isLoading = false;
      }
    },

    // 格式化内容
   formatContent(content) {
     return content
       .replace(/\*\*(.*?)\*\*/g, '$1')  // 去除加粗符号但保留内容
       .replace(/\*/g, '')               // 删除所有星号
       .replace(/(\d+)\./g, '\n$1.')     // 保证数字编号后换行
       .replace(/\n+/g, '\n')            // 合并多个空行
       .trim();                          // 去除首尾空白
   },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 40rpx 0;
}

.title {
  display: block;
  font-size: 38rpx;
  color: #2c3e50;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.subtitle {
  color: #7f8c8d;
  font-size: 28rpx;
}

.search-box {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
  background: #fff;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.search-input {
  flex: 1;
  font-size: 30rpx;
  color: #34495e;
}

.placeholder-style {
  color: #bdc3c7;
}

.search-btn {
  width: 95rpx;
  height: 90rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
}

.loading-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.result-list {
  margin-top: 40rpx;
}

.result-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.item-header {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.item-title {
  display: block;
  font-size: 34rpx;
  color: #2c3e50;
  font-weight: 500;
  margin-bottom: 15rpx;
}

.item-symptoms {
  color: #e74c3c;
  font-size: 26rpx;
  background: #fce4ec;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
}

.item-content {
  color: #7f8c8d;
  font-size: 28rpx;
  line-height: 1.6;
}

.empty-state {
  color: #7f8c8d;
  text-align: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  color: #95a5a6;
  font-size: 30rpx;
}
</style>



